<template>
  <Modal v-model="showRoleModal"
         :footer-hide="true"
         :closable="true"
         title="添加角色"
  >
    <Form ref="addForm" :model="role" label-position="left"
          :label-width="100" :rules="rules"
          @keydown.enter.native="formSubmit">

      <FormItem label="角色名称" prop="roleName">
        <Input v-model="role.roleName" type="text"></Input>
      </FormItem>
      <FormItem label="角色编码" prop="roleCode">
        <Input v-model="role.roleCode" type="text"></Input>
      </FormItem>
      <FormItem label="角色描述" prop="description">
        <Input v-model="role.description" type="textarea"></Input>
      </FormItem>
      <FormItem label="启用状态" prop="status">
        <RadioGroup  type="button" v-model="role.status">
          <Radio label="Enable" value="200">启用</Radio>
          <Radio label="Disable" value="500">禁用</Radio>
          <Radio label="Lock" value="400">锁定</Radio>
          <Radio label="Unlock" value="402">解除锁定</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem class="right">
        <Button type="primary" class="rapper" @click="formSubmit">确定</Button>
        <Button type="info" class="rapper" @click="formCancel">取消</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
import {addRoleData} from "@/api/data";

export default {
  name: "AddRole",
  data() {
    return {
      role: {
        roleName: '',
        roleCode: '',
        description: '',
        parent: '',
        status: '',
        permissions:''
      },
      showRoleModal:false
    }
  },
  props: {
    roleNameRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '角色名不能为空', trigger: 'blur'}
        ]
      }
    },
    roleCodeRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ]
      }
    },
    descriptionRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '手机号不能为空', trigger: 'blur'}
        ]
      }
    },
    statusRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请勾选状态', trigger: 'blur'}
        ]
      }
    },
  },
  computed: {
    rules() {
      return {
        roleName: this.roleNameRules,
        roleCode: this.roleCodeRules,
        description: this.descriptionRules,
        status:this.statusRules
      }
    }
  },
  methods: {
    showModal(){
      this.showRoleModal = true;
    },
    formSubmit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addRoleData(this.role).then(res => {
            let data = res.data;
            if (data && data.code === 200) {

              this.$Message.success("添加成功！");
              this.$emit("refresh")
            } else {
              this.$Message.error(data.message);
            }
            this.showRoleModal = false
          })
        }
      });
    },
    formCancel() {
      this.showRoleModal = false
      this.$Message.info("取消添加角色！");
    }
  }
}
</script>

<style lang="less">
.right {
  text-align: right
}

.rapper {
  margin: 0 2px;
}
</style>
